﻿@page "/documentation/display"
@layout DocumentationLayout
@inherits DocumentationPage

<PageTitle>Display - Documentation - Blazor Diagrams</PageTitle>

<h1>Display</h1>

<p>
   You've created a diagram and populated it, let's display it!<br />
   First, let's setup our component so that it has a specific width and height. 
   In order for us to display the diagram, a visible parent is mandatory, since the canvas uses 100% width/height.
</p>

<div class="filename">MyDiagram.razor</div>
<pre><code class="language-cshtml">
&lt;div class=&quot;diagram-container&quot;&gt;

&lt;/div&gt;
</code></pre>

Now create a scoped CSS file with the following content:
<div class="filename">MyDiagram.razor.css</div>
<pre><code class="language-css">
.diagram-container {
	width: 100%;
    height: 400px;
    border: 1px solid black; /* Just visual */
}
</code></pre>

Now that we have a visible container, let's display the diagram:

<div class="filename">MyDiagram.razor</div>
<pre><code class="language-cshtml">
@@using Blazor.Diagrams.Components

&lt;div class=&quot;diagram-container&quot;&gt;
    &lt;CascadingValue Value=&quot;Diagram&quot; IsFixed=&quot;true&quot;&gt;
        &lt;DiagramCanvas&gt;&lt;/DiagramCanvas&gt;
    &lt;/CascadingValue&gt;
&lt;/div&gt;
</code></pre>

<p class="mb-2">
    If you used the default styles and did everything correctly, here's how the diagram would look:<br />
    <i class="text-sm">It's interactive, play with the nodes!</i>
</p>

<MyDiagram />

<p class="mt-2">
    Congratulations! You're now ready to move to the interesting stuff.
</p>

<NavigationButtons PreviousTitle="Diagram Creation"
                   PreviousLink="/documentation/diagram-creation" />